<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>简易手机通讯录</title>
    <style>
        .container {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
        }
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin: 8px 0;
            box-sizing: border-box;
        }
        button {
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>手机通讯录管理</h2>
        <input type="text" id="name" placeholder="姓名">
        <input type="text" id="phone" placeholder="电话">
        <button onclick="addContact()">添加</button>
        <button onclick="findContact()">查询</button>
        <button onclick="deleteContact()">删除</button>
        <button onclick="resetContacts()">重置</button>

        <h3>通讯录</h3>
        <ul id="contactList"></ul>
    </div>

    <script>
        function loadContacts() {
            const contactList = document.getElementById('contactList');
            contactList.innerHTML = '';
            for (let i = 0; i < localStorage.length; i++) {
                const key = localStorage.key(i);
                if (key.startsWith('contact_')) {
                    const contact = JSON.parse(localStorage.getItem(key));
                    const li = document.createElement('li');
                    li.textContent = `${contact.name}: ${contact.phone}`;
                    contactList.appendChild(li);
                }
            }
        }

        function addContact() {
            const name = document.getElementById('name').value;
            const phone = document.getElementById('phone').value;
            if (name && phone) {
                const contact = { name, phone };
                localStorage.setItem(`contact_${name}`, JSON.stringify(contact));
                loadContacts();
            }
        }

        function findContact() {
            const name = document.getElementById('name').value;
            if (name) {
                const contact = JSON.parse(localStorage.getItem(`contact_${name}`));
                alert(contact ? `${contact.name}: ${contact.phone}` : '未找到联系人');
            }
        }

        function deleteContact() {
            const name = document.getElementById('name').value;
            if (name && localStorage.getItem(`contact_${name}`)) {
                localStorage.removeItem(`contact_${name}`);
                loadContacts();
            } else {
                alert('未找到联系人');
            }
        }

        function resetContacts() {
            localStorage.clear();
            loadContacts();
        }

        window.onload = loadContacts;
    </script>
</body>
</html>